// useState- 给组件添加一个状态变量， 数据驱动视图
import { useState } from "react";

// function App () {
//   // 调用 useState 添加一个状态变量
//   // count：状态变量
//   // setCount：修改状态变量的方法
//   const [count, setCount] = useState(0);

//   //   定义函数
//   const AddNum = () => {
//     setCount(count + 1);
//   }
//   return(
//     <div>
//       <p>You clicked {count} times</p>
//       <button onClick={AddNum}>
//         Click me
//       </button>
//     </div>
//   )
// }
// export default App;

// 修改复杂对像
function App () {
  const [form, setForm] = useState({ name: "张三" });

  //   定义函数
  const ChangeForm = () => {
    setForm({
     ...form,
      name: "李四"
    });
  }
  return(
    <div>
      <p>名字：{form.name}</p>
      <button onClick={ChangeForm}>
        Click me
      </button>
    </div>
  )
}
export default App;
